import { Dropdown, Menu } from 'antd';
import type { MenuProps } from 'antd';
import useBack from '@/views/hooks/useBack';
import { itemsNav } from './menuList';
import { Outlet } from 'react-router-dom';
export default function Home() {
  const navagate = useNavigate();
  const { back } = useBack();
  const [userInfo, setUserInfo] = useState<Record<string, string>>({});
  useEffect(() => {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
    setUserInfo(userInfo);
    navagate('/room');
  }, []);
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <div>修改信息</div>,
    },
    {
      key: '2',
      label: <div>退出登录</div>,
    },
  ];
  const DropdownOnclick: MenuProps['onClick'] = ({ key }) => {
    const methodMap: Record<string, () => void> = {
      '1': () => {
        navagate('/update-userinfo');
      },
      '2': () => {
        back();
      },
    };
    methodMap[key]();
  };
  const menuOnclick: MenuProps['onClick'] = e => {
    navagate(e.key);
  };
  return (
    <div className=" p-2">
      <header className=" flex justify-between items-center bg-cyan-400 p-1">
        <div className=" font-black">会议室预定系统</div>
        <Dropdown menu={{ items, onClick: DropdownOnclick }} placement="bottom" arrow>
          <div className=" cursor-pointer flex items-center">
            <img
              style={{ zIndex: 9999 }}
              className=" w-10 h-10 rounded-full"
              src={userInfo.headPic}
              alt="头像"
            />
            <div className=" ml-2 w-7 text-center">{userInfo.username} </div>
          </div>
        </Dropdown>
      </header>
      <main className=" flex">
        <nav
          style={{ height: 'calc(100vh - 64px)', width: '256px' }}
          className=" overflow-y-auto bg-white"
        >
          <Menu
            onClick={menuOnclick}
            style={{ width: 256 }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            items={itemsNav}
          />
        </nav>
        <div
          className=" p-1"
          style={{ width: 'calc(100vw - 256px)', height: 'calc(100vh - 64px)' }}
        >
          <Outlet />
        </div>
      </main>
    </div>
  );
}
